<template>
    <div class="crossMedical">
          <div class="cross-introduc">
              <div class="left-cross">
                  <h3>跨境医疗</h3>
                  <p>有别其他医疗服务机构，长木中国成立的宗旨，就是建立国内最优秀的医疗服务机构，为患者提供最优质的医疗服务，推动医疗科技的研究发展。我们深刻的理解到，专业性的重要。为此长木中国配备了：</p>
                  <ul class="cross-ul">
                      <li>境外资深的行业顶尖医学教授;</li>
                      <li>境外顶尖的医疗研究机构；</li>
                      <li>境内顶尖的医学专家；</li>
                      <li>国内著名的医科大学作为合作机构;</li>
                  </ul>
              </div>
             <div class="right-cross">
                 <img src="../../assets/images/cross_0007s.png"> 
             </div>
          </div>
          <div class="experts">
               <div class="experts-text">
                   <p>国际权威专家推荐</p>
                   <p> Castle Connolly 权威评选，只推荐适合您的优秀专家</p>
               </div>
               <p class="experts-more" @click="goExperts">MORE+</p>
               <div class="experts-items">
                  <div class="experts-item"> 
                      <img src="../../assets/images/cross_0005s.png">
                      <p class="experts-name">Linnea I. Chap, M.D. </p>
                      <p>专科认证：内科学、肿瘤学、血液学</p>
                      <p>执业编号：G 73680</p>
                      <p>医疗专长：乳腺癌、宫颈癌、卵巢癌</p>
                  </div>
                  <div class="experts-item"> 
                      <img src="../../assets/images/cross_0005s.png">
                      <p class="experts-name">Linnea I. Chap, M.D. </p>
                      <p>专科认证：内科学、肿瘤学、血液学</p>
                      <p>执业编号：G 73680</p>
                      <p>医疗专长：乳腺癌、宫颈癌、卵巢癌</p>
                  </div>
                  <div class="experts-item"> 
                      <img src="../../assets/images/cross_0005s.png">
                      <p class="experts-name">Linnea I. Chap, M.D. </p>
                      <p>专科认证：内科学、肿瘤学、血液学</p>
                      <p>执业编号：G 73680</p>
                      <p>医疗专长：乳腺癌、宫颈癌、卵巢癌</p>
                  </div>
               </div>
               <div class="hospital">
                  <div class="experts-text">
                   <p>出国看病权威医院</p>
                   <p>我们只与世界权威医院和机构合作，为国内患者提供权威的出国看病服务</p>
                  </div>
                  <p class="experts-more">MORE+</p>
                  <div class="experts-hospitals">
                    <div class="experts-hospital" @mouseenter="show1" @mouseleave="hide1"> 
                      <span class="experts-bg" v-if="flag1"></span>
                      <img src="../../assets/images/hospital_08.png">
                      <p>麻省总医院</p>
                      <div v-if="flag1">
                          麻省总医院(MGH)建立于1811年，是美国历史最悠久的三所医院之一，也是新英格兰地区建立最早、规模最大的医院和哈佛医学院建立最早、规模最大的教学医院。该院拥有床位900余张，有21000名医护人员。每年住院病人47000例，门诊量140万，急诊量88000例，手术量38,000例.麻省总医院几乎所有的医生都在哈佛医学院任教。
                      </div>
                    </div>
                    <div class="experts-hospital" @mouseenter="show2" @mouseleave="hide2"> 
                      <span class="experts-bg" v-if="flag2"></span>
                      <img src="../../assets/images/hospital_03.png">
                      <p>梅奥诊所</p>
                      <div v-if="flag2">
                          梅奥诊所
                      </div>
                    </div>
                    <div class="experts-hospital" @mouseenter="show3" @mouseleave="hide3"> 
                      <span class="experts-bg" v-if="flag3"></span>
                      <img src="../../assets/images/hospital_05.png">
                      <p>波士顿儿童医院</p>
                      <div v-if="flag3">
                          波士顿儿童医院
                      </div>
                    </div>
                  </div>
               </div>
          </div>
     </div>
</template>

<script>
export default {
    data(){
        return {
            flag1:false,
            flag2:false,
            flag3:false,
        }
    },
    methods: {
        //麻省总医院
        show1(){   
         this.flag1=true;
        },
        hide1(){
         this.flag1=false;
        },
        //梅奥诊所
        show2(){
         this.flag2=true;
        },
        hide2(){
         this.flag2=false;
        },
        //波士顿儿童医院
        show3(){
         this.flag3=true;
        },
        hide3(){
         this.flag3=false;
        },

        goExperts(){
         this.$router.push({
            name:'experts'
         });
         this.login=this.$store.commit('setLogin');
        }
    },
}
</script>

<style scoped>
.crossMedical{
    position:relative;
    top:-20px;
}
.crossMedical .img-service{
    width:100%;
}
h3{
    font-size:30px;
}
.w{
    width:1200px;
    margin:0 auto;
    position: relative;
}
.search-input{
    display: flex;
    justify-content: flex-end;
    margin-top:20px;
}
.input-group{
    width:250px;
}
.cross-introduc{
   margin-top:60px;
   display: flex;
   justify-content: space-between;
}
.cross-ul{
  list-style: none;
  position: relative;
  left:-42px;
  top:0;
}
.cross-ul li::before{
  content:url('../../assets/images/li_03.png');
}
.experts{
    margin-top:100px;
}
.experts-text{
  text-align: center;
}
.experts-text p:nth-of-type(1){
  font-size: 24px;
}
.experts-text p:nth-of-type(2){
  font-size: 16px;
}
.experts-more{
   display: flex;
   justify-content: flex-end;
   margin-right:10px;
   cursor: pointer;
}
.experts-items{
    display: flex;
    justify-content: space-around;
}
.experts-item{
    width:382px;
    height:472px;
    text-align: center;
    font-size: 14px;
    color: #999999;
}
.experts-item:hover{
    box-shadow: 4px 4px 3px #f2f8f9;
    color:#000;
    cursor: pointer;
}
.experts-item img{
    width:382px;
    height:284px;
}
.experts-name{
    font-size: 24px;
    color:#000;
}
.hospital{
    margin-top:60px;
}
.experts-hospitals{
    display:flex;
    justify-content: space-around;
}
.experts-hospital{
   position: relative;
   cursor: pointer;
}
.experts-hospital img{
  z-index: -1;
}
.experts-bg{
    background:#000;
    height: 380px;
    width:382px;
    display: block;
    position: absolute;
    left:0px;
    top:0px;
    opacity: 0.5;
}
.experts-hospital p{
  position: absolute;
  left:130px;
  top:60px;
  color:#fff;
  font-size: 24px;
}
.experts-hospital div{
  position: absolute;
  left:50px;
  top:132px;
  width:300px;
  height:200px;
  color:#fff;
  font-size: 14px;
  z-index: 999;
}
</style>
